<template>
    <div class="echarts-root">
        <div :id="ecahrtId" style="width: 100%;" :style="{ height: cHeight }"></div>
    </div>
</template>

<script setup>
//仪表盘
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const ecahrtId = 'echartsDashboardDom' + Math.floor(Math.random() * 10000);

const props = defineProps({
    // 图表高度，带单位
    cHeight: {
        type: String,
        default: '220px',
    },
    list: {
        type: Array,
        default: () => {
            return []
        }
    }
});

watch(() => props.list, value => initEcharts(value))


//图表对象
const echartsObj = ref(null);

//初始化图表
const initEcharts = (seriesDatas = []) => {
    let echartsDom = document.getElementById(ecahrtId);
    echarts.dispose(echartsDom);
    echartsObj.value = echarts.init(echartsDom);

    if (!seriesDatas || seriesDatas.length == 0) {
        seriesDatas = [{
            name: '总数',
            value: 0
        }]
    }
    let option = {
        tooltip: {
            trigger: 'item',
        },
        legend: {
            show: true
        },
        series: [{
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '75%'],
            radius: '110%',
            min: 0,
            max: 10000,
            splitNumber: 8,
            axisLine: {
                lineStyle: {
                    width: 25,
                    shadowBlur: 15,
                    shadowColor: "rgba(0,0,0,0.2)",
                    color: [
                        [0.25, '#7CFFB2'],
                        [0.5, '#58D9F9'],
                        [0.75, '#FDDD60'],
                        [1, '#FF6E76']
                    ]
                },
            },
            pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '12%',
                width: 20,
                offsetCenter: [0, '-60%'],
                itemStyle: {
                    color: 'auto'
                }
            },
            axisTick: {
                length: 6,
                lineStyle: {
                    color: 'auto',
                    width: 1
                }
            },
            splitLine: {
                length: 10,
                lineStyle: {
                    color: 'auto',
                    width: 3
                }
            },
            axisLabel: {
                color: '#464646',
                fontSize: 14,
                distance: -50,
                rotate: 'tangential',
                formatter: function (value) {
                    if (value === 1250) {
                        return '局部入侵(4级)';
                    } else if (value === 3750) {
                        return '局部入侵(3级)';
                    } else if (value === 6250) {
                        return '严重入侵(2级)';
                    } else if (value === 8750) {
                        return '恶性入侵(1级)';
                    }
                    return '';
                }
            },
            title: {
                offsetCenter: [0, '-10%'],
                fontSize: 14
            },
            detail: {
                fontSize: 20,
                offsetCenter: [0, '-35%'],
                valueAnimation: true,
                formatter: function (value) {
                    return value + '';
                },
                color: 'inherit'
            },
            data: seriesDatas
        }]
    };
    echartsObj.value.setOption(option);

    window.addEventListener('resize', () => {
        if (echartsObj.value) {
            echartsObj.value.resize()
        }
    })
}

onMounted(() => {
    initEcharts()
})

</script>

<style lang="scss" scoped>
.echarts-root {
    position: relative;
    width: 100%;
    height: 100%;

    .total-div {
        position: absolute;
        top: 36%;
        left: 50%;
        z-index: 11;
        width: 120px;
        height: 70px;
        margin-left: -60px;
        text-align: center;
        border-radius: 10px;

        .total {
            font-size: 30px;
            color: #000;
        }

        .tag {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
    }
}
</style>